import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {createStackNavigator} from 'react-navigation';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';

import LoginScreen from '../components/LoginScreen';
import MainScreen from '../components/MainScreen';
import ProfileScreen from '../components/ProfileScreen';
import StackViewStyleInterpolator from 'react-navigation/src/views/StackView/StackViewStyleInterpolator'

const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav
);

const RootNavigator = createStackNavigator({
    Main: {screen: MainScreen},
    Login: {screen: LoginScreen},
    Profile: {screen: ProfileScreen},
  },
  {
    initialRouteName: 'Main',
    mode: 'card',
    headerMode: 'screen',
    cardStyle: {
      backgroundColor: '#F4F4F4',
    },
    navigationOptions: () => ({
      gesturesEnabled: true,
      headerBackTitle: null,
      headerTintColor: 'blue',
      headerStyle: {
        backgroundColor: 'red',
        borderBottomWidth: 0,
        elevation: 0,
      },
      headerTitleStyle:{alignSelf:'center'},
    }),
    transitionConfig: () => ({
      screenInterpolator: StackViewStyleInterpolator.forHorizontal,
    })
  });

const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');

const mapStateToProps = state => ({
  state: state.nav,
});

const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);

export {RootNavigator, AppNavigator, middleware};
